<template>
  <div class="refine_hscdaytask">
    <div class="contant">
      <div class="plan-operate">
        <div @click="create" class="fl create" v-if="sysShow">创建任务</div>
        <div @click="show" class="fl create" v-if="false">一键派发</div>
        <div @click="recieveTask" class="fl create">领取任务</div>
        <div class="fl create" @click="tmpbtn">临时情况上报</div>
        <el-form ref="form" :model="planform" label-width="80px">
          <!-- @change="search" @clear="search"-->
          <el-input prefix-icon="el-icon-search" placeholder="搜索任务" clearable
                    v-model="planform.search" class="plansearch" @clear="search" @change="search">
            <span slot="append">搜索</span>
          </el-input>
          <!-- <el-form-item label="任务状态" class="planselect" v-if="plantabs=='distributed'">
                      <el-select v-model="planform.assign" clearable @change="search">
                          <el-option v-for='item in taskState' :label="item.label" :value="item.value" :key='item.value'></el-option>
                      </el-select>
                  </el-form-item> -->
        </el-form>
      </div>
      <el-tabs v-model="plantabs" type="card" @tab-click="handleClick">
        <el-tab-pane label="待派发任务列表" name="distributing">
          <el-table ref="multipleTable" @selection-change="handleSelectionChange" border stripe :data="tableData"
                    style="width: 100%">
            <el-table-column label="序号" align="center" width="60">
              <template slot-scope="scope">
                <span v-if='scope.$index!=9'>{{(currentPage-1).toString()+parseInt(scope.$index+1)}}</span>
                <span v-else>{{currentPage+'0'}}</span>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="taskNo" label="任务编号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="任务名称" align="center">
            </el-table-column>
            <el-table-column prop="taskTypeFlows" label="任务类型" align="center">
              <template slot-scope="scope">
                <span v-for="item in scope.row.taskTypeFlows">{{ttypes(item) ? ttypes(item) : ''}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="organiza" label="所属辖区" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.organiza ? scope.row.organiza.name : ''}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="taskSource" label="任务来源" align="center" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.taskSource == 1">派发任务</span>
                <span v-else-if="scope.row.taskSource == 2">临时任务</span>
                <span v-else-if="scope.row.taskSource == 3">领取任务</span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" align="center" width="140">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click='send(scope.row)'>派发
                </el-button>
                <el-button v-if='scope.row.cuId==username||orgid==44' size="mini" type="text"
                           @click='edit(scope.row, "edit")'>编辑
                </el-button>
                <el-button size="mini" type="text" @click='edit(scope.row, "view")'>查看
                </el-button>
                <el-button v-if='username==1||username==scope.row.cuId' size="mini" type="text"
                           @click='delet(scope.row)'>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已派发任务列表" name="distributed">
          <el-table border stripe :data="tableData1" style="width: 100%">
            <el-table-column prop="d_id" label="序号" align="center" width="60">
              <template slot-scope="scope">
                <span v-if='scope.$index!=9'>{{(currentPage1-1).toString()+parseInt(scope.$index+1)}}</span>
                <span v-else>{{currentPage1+'0'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="taskNo" label="任务编号" align="center">
            </el-table-column>
            <el-table-column prop="name" label="任务名称" align="center">
            </el-table-column>
            <el-table-column prop="taskTypeFlows" label="任务类型" align="center">
              <template slot-scope="scope">
                <span v-for="item in scope.row.taskTypeFlows">{{ttypes(item) ? ttypes(item) : ''}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="taskState" label="任务状态" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.taskState == 0">待指挥中心派发</span>
                <span v-else-if="scope.row.taskState == 1">待1级机构派发</span>
                <span v-else-if="scope.row.taskState == 2">待2级机构派发</span>
                <span v-else-if="scope.row.taskState == 3">已派发</span>
                <span v-else-if="scope.row.taskState == 4">已中止</span>
                <span v-else-if="scope.row.taskState == 5">已撤销</span>
                <span v-else-if="scope.row.taskState == 6">已超期</span>
                <span v-else-if="scope.row.taskState == 7">暂存</span>
                <span v-else-if="scope.row.taskState == 8">已完成</span>
                <span v-else-if="scope.row.taskState == 9">已派发</span>
                <span v-else-if="scope.row.taskState == 10">正执行</span>
              </template>
            </el-table-column>
            <el-table-column prop="organiza" label="所属辖区" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.organiza ? scope.row.organiza.name : ''}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="taskSource" label="任务来源" align="center" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.taskSource == 1">派发任务</span>
                <span v-else-if="scope.row.taskSource == 2">临时任务</span>
                <span v-else-if="scope.row.taskSource == 3">领取任务</span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" align="center" width="140">
              <template slot-scope="scope">
                <el-button size="mini" type="text"
                           v-if="(scope.row.createUserName==username&&scope.row.taskState=='9')||(scope.row.createUserName==username&&scope.row.taskState=='2')||(scope.row.createUserName==username&&scope.row.taskState=='1')||(scope.row.createUserName==username&&scope.row.taskState=='0')"
                           @click='undo(scope.row)'>撤销
                </el-button>
                <el-button size="mini" type="text"
                           v-if="(scope.row.createUserName==username&&scope.row.taskState=='6')||(aadmin&&scope.row.taskState=='6')||(scope.row.createUserName==username&&scope.row.taskState=='10')||(aadmin&&scope.row.taskState=='10')"
                           @click='cancel(scope.row)'>中止
                </el-button>
                <el-button size="mini" type="text" @click='edit(scope.row, "view")'>查看
                </el-button>
                <el-button v-if='username==1||username==scope.row.createUserName' size="mini" type="text"
                           @click='delet(scope.row)'>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage" v-if='plantabs=="distributing"'
                       layout="total,prev, pager, next, jumper" :total="pageNumber" background>
        </el-pagination>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage1" v-if='plantabs=="distributed"'
                       layout="total,prev, pager, next, jumper" :total="pageNumber1" background>
        </el-pagination>
      </div>
    </div>
    <router-view @close="close" @update="search(0)"></router-view>


    <el-dialog title="" :visible.sync="tmpdialog" width="80%" append-to-body>
        <span>
            <h2 class="titleblue">临时情况上报列表</h2>
            <div class="contant" style="padding-bottom:10px;">
                <div class="plan-operate">
                    <div class="fl create" v-if='!aadmin' @click="tmpbtnShow">临时情况上报</div>
                </div>

              <el-table :data="tableData2" border style="width: 100%">
                  <el-table-column align="center" label="序号" width="60" prop="no">
                    <template slot-scope="scope">
                      {{(scope.$index+1)<10? '0'+(scope.$index+1):scope.$index+1}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="任务等级" prop="grade">
                    <template slot-scope="scope">
                      {{scope.row.grade == 1 ? "一般" : "紧急"}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="任务地点" prop="location"></el-table-column>
                  <el-table-column align="center" label="任务概要" prop="summary"></el-table-column>
                  <el-table-column align="center" label="上报时间" prop="createTime">
                    <template slot-scope="scope">
                      {{$m(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
                    </template>
                  </el-table-column>
                  <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" @click="manipulate({data: scope.row, action: 'edit'})">编辑</el-button>
                      <el-button size="mini" type="text" @click="manipulate({data: scope.row, action: 'revoke'})">撤销</el-button>
                      <el-button size="mini" type="text" @click="manipulate({data: scope.row, action: 'view'})">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <!--<data-table style="width:100%" :head="thead" :data="tableData2" :page="currentPage3" :operate="options"
                            :actions="['edit','revoke','view']" @callback="manipulate"></data-table>-->

                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange1"
                               :current-page.sync="currentPage3" layout="total,prev, pager, next, jumper"
                               :total="totalPage" background>
                </el-pagination>
            </div>

        </span>
    </el-dialog>

    <el-dialog title="" :visible.sync="tmpSituation" width="80%" append-to-body class="task-content" @close="tmpClose">
      <h2 class="titleblue">临时情况上报</h2>
      <div class="contant">
        <el-form ref="form" :model="form" :disabled='tmp' label-width="100px">
          <el-row>
            <!--<el-col :span="24" v-if='tmp'>-->
            <!--<el-form-item label="上报单位">-->
            <!--<el-input v-model="form.distribute_name" placeholder="" class="select-width-220"></el-input>-->
            <!--<el-input v-if="form.enforcementbrigade_name" v-model="form.enforcementbrigade_name" placeholder=""-->
            <!--class="select-width-220"></el-input>-->
            <!--</el-form-item>-->
            <!--</el-col>-->
            <el-col :span="24">
              <el-form-item label="上报单位" :rules="[{ required: true, message: '上报单位不能为空'}]">
                <el-select v-model="form.distribute" placeholder="" @change="dpChanges" :disabled="tmp">
                  <el-option v-for="item in organization" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="form.enforcementBrigade" placeholder="" :disabled="tmp">
                  <el-option v-for="item in deptOption" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="任务等级" :rules="[{ required: true, message: '任务等级不能为空'}]">
                <el-select v-model="form.grade" placeholder="" :disabled="tmp">
                  <el-option v-for="item in gradeOptions" :key="item.d_id" :label="item.name" :value="item.d_id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="任务地点">
                <el-input v-model="form.location" placeholder="" :disabled="tmp" class="select-width-220"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="任务概要" :rules="[{ required: true, message: '任务概要不能为空'}]">
                <el-input type="textarea" v-model="form.summary" :disabled="tmp" placeholder=""
                          class="_area"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="其他情况">
                <el-input type="textarea" v-model="form.otherCases" :disabled="tmp" placeholder=""
                          class="_area"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="tmp&&form.url">
            <div class="grid-content">
              <el-form-item label='任务附件'>
                <!-- <img :src="item" v-for='item in imgurl' alt=""> -->
                <a class="annex-div" v-for='(item,index) in imgurl' target='_blank' :href="item" download="">
                  <img :src="item"/>
                </a>
                <a class="annex-div file-div" v-for='(item,index) in fileImg1' target='_blank'
                   :href="item" download="item">
                  {{item.substring(item.lastIndexOf('task/') + 5, item.length)}}
                </a>
              </el-form-item>
            </div>
          </el-row>
          <el-row v-if='!tmp'>
            <el-form-item label="任务附件">
              <el-upload class="upload-demo" ref="upload" :action="$config.FILE_UPLOAD_URL" :data='uploadobj'
                         :headers="headers" :limit="9" accept='.png,.jpg,.jpge' multiple :file-list="fileList"
                         :before-upload='beforeupload' :on-success='uploadSuccess' :on-remove="uploadRemove"
                         :on-exceed="handleExceed">
                <el-button size="small" type="primary">上传</el-button>
                <div slot="tip" class="el-upload__tip"></div>
              </el-upload>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" :disabled="tmp" placeholder="" class="_area"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="button-action" style="text-align: center;">
            <el-button class="sure" v-if="!tmp" @click="submit">提交</el-button>
            <el-button class="cancel" v-if="!tmp" @click='tmpClose'>取消</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DataTable from '@/components/common/DataTable.vue'
  import XTree from '@/components/common/XTree.vue'
  import taskService from '@/services/TaskService.js'
  import taskObjectService from '@/services/TaskObjectService'
  import taskTypeService from '@/services/TaskTypeService'
  import msgGroupsService from '@/services/MsgGroupsService'
  import * as organizationService from '@/services/OrganizationService'
  import * as sysUserService from '@/services/SysUserService'

  export default {
    components: {
      'data-table': DataTable,
      'x-tree': XTree
    },
    data: function () {
      return {
        aadmin: this.$checkPermission('/everyday-task'),
        planform: {
          assign: '',
          search: '',
        },
        plantabs: 'distributing',
        tableData: [],
        tableData1: [],
        currentPage: 1,
        currentPage1: 1,
        onekeydialog: false,
        tmpTitle: '',
        params: {
          skey: localStorage.getItem('auth'),
          counts: '10',
          page: '1'
        },
        taskState: [],
        pageNumber: 0,
        pageNumber1: 0,
        page: '',
        sysShow: false,
        fileList: [],
        headers: {
          Authorization: 'Bearer ' + localStorage.getItem('token')
        },
        //临时情况上报
        thead: [
          {
            name: '任务等级',
            prop: 'grade'
          },
          {
            name: '任务地点',
            prop: 'location'
          },
          {
            name: '任务概要',
            prop: 'outline'
          },
          {
            name: '上报时间',
            prop: 'uptime'
          }
        ],
        tableData2: [],
        sendingID: '',
        level: '',
        tmpdialog: false,
        tmpSituation: false,
        currentPage3: 1,
        totalPage: 0,
        options: [{
          name: '查看',
          prop: 'look'
        }],
        uploadobj: {
          filename: '',
          mimeType: 'txt/doc',
          bus: 'task'
        },
        form: {
          distribute: '',
          enforcementBrigade: '',
          grade: '',
          location: '',
          summary: '',
          otherCases: '',
          remark: '',
          url: []
        },
        gradeOptions: [{
          d_id: 1,
          name: '一般'
        }, {
          d_id: 2,
          name: '紧急'
        }],
        groupOption: [],
        deptOption: [],
        qwer: true,
        tmp: true,
        imgurl: [],
        fileImg1: [],
        sendDialog: false,
        manageUnitOptions: [],
        distributeOptions: [],
        disSecondOptions: [],
        personOptions: {},
        carrierOptions: [],
        toolOptions: [],
        vehicleOptions: [],
        lhpf: [],
        sendTask: {
          distribute: '',
          distributeSecond: '',
          unit: [{
            person: '',
            carrier: '',
            vehicle: '',
            tool: ''
          }],
        },
        copylist: [],
        // copylistP: [],
        leaderlist: [],
        dows: [],
        laws: [],
        egs: [],
        dutys: [],
        checkLeader: false,
        checkedLeader: [],
        checkBroat: false,
        checkedBroat: [],
        checkDuty: false,
        checkedDuty: [],
        checkEg: false,
        checkedEg: [],
        checkLaw: false,
        checkedLaw: [],
        checkDow: false,
        checkedDow: [],
        treeList: [],
        sendoutline: '',
        multipleSelection: [],
        orgid: localStorage.getItem('org_id'),
        persontree: '',
        customize: [],
        checkCustomize: false,
        checkedCustomize: [],
        customizelength: '',
        dialogVisible: false,
        groupData: [],
        ruleForm: {
          name: '',
        },
        aa: [],
        cusChil: [],
        checkAll: false,
        data2: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        taskType: [], // 任务类型
        taskObjectType: [], // 任务对象类型
        organization: [], // 组织机构
        sysUser: [], // 全部组织机构人员
        tableInfo: {},
        Zero: [],
        One: [],
        Two: [],
        Three: [],
        Four: [],
        Five: [],
        Seven: [],
        Custom: [],
        copyArr: {
          zeroTree: [],
          oneTree: [],
          twoTree: [],
          threeTree: [],
          // fourTree: [],
          // fiveTree: [],
          // sevenTree: [],
          customTree: []
        },
        organizaAll: [],
        zeroList: [],
        checkZero: false,
        checkOne: false,
        checkTwo: false,
        checkThree: false,
        checkFour: false,
        checkFive: false,
        checkSeven: false,
        checkCustom: false,
        detailId: null,
        createTime: null,
        treeList2: [],
        filterText: ''
      }
    },
    async created() {
      this.businessOrg = localStorage.getItem('businessOrg')
      // this.level = localStorage.getItem('level')
      this.username = this.$profile.fullname
      this.sysShow = this.$checkPermission('/everyday-task/create')
      await this.search()
      await this.getSelect()
    },
    computed: {
      copylistP() {
        let arr = [], custom = this.copyArr.customTree
        arr.push(...this.copyArr.zeroTree)
        arr.push(...this.copyArr.oneTree)
        arr.push(...this.copyArr.twoTree)
        arr.push(...this.copyArr.threeTree)
        // arr.push(...this.copyArr.fourTree)
        // arr.push(...this.copyArr.fiveTree)
        // arr.push(...this.copyArr.sevenTree)
        for (let a = 0; a < custom.length; a++) {
          for (let b = 0; b < arr.length; b++) {
            if (custom[a].label == arr[b].label) {
              custom.splice(a, 1)
            }
          }
        }
        arr.push(...custom)
        return arr
      }
    },
    methods: {
      ttypes(item) {
        let task = ''
        let obj1 = {}, obj2 = {}, obj3 = {}
        if (item.type1) {
          for (let task of this.taskType) {
            if (task.id == item.type1) obj1 = task
          }
          task = obj1 ? obj1.name : ''
          if (obj1 && obj1.subset) {
            for (let task of obj1.subset) {
              if (task.id == item.type2) obj2 = task
            }
            if (item.type2) task = obj2 ? obj2.name : ''
            if (obj2 && obj2.subset && item.type2) {
              for (let task of obj2.subset) {
                if (task.id == item.type3) obj3 = task
              }
              if (obj3 && item.type3) {
                task = obj3.name
              }
            }
          }
        }
        return task
      },

      showTmpDetail(data) {
        //
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'urlFile' && data[key]) {
            this.form.url = data[key].split(',')
            this.fileImg1 = data[key].split(',')
            this.fileList = data[key].split(',').map(item => {
              return {
                name: item.substring(item.lastIndexOf('task/') + 5, item.length),
                link: item
              }
            })
          } else if (key == 'organiza' && data[key]) {
            this.organization.forEach(item => {
              if (data[key].level == 1 || data[key].level == 0) {
                this.form.distribute = data[key].id
              } else {
                if (item.id == data[key].parentId) {
                  this.deptOption = item.sub
                  this.form.distribute = item.id
                }
                this.form.enforcementBrigade = data[key].id
              }
            })
          } else {
            this.form[key] = data[key]
          }
        }
      },
      send(val) {

        this.onekeydialog = true
        // this.sendingID = val.id
        // this.sendoutline = val.outline
        // this.tableInfo = val
        this.$router.push({name: 'SendTask', params: {data: val}})
      },
      getSelect() {
        taskTypeService.search().then(res => {

          this.taskType = res
        })
        taskObjectService.search().then(res => {

          this.taskObjectType = res
        })
        organizationService.findAll().then(async res => {
          await res.data.sort((a, b) => {
            if (a.businessOrg < b.businessOrg) {
              return -1
            }
            if (a.businessOrg > b.businessOrg) {
              return 1
            }
            return 0
          })
          this.organization = res.data
        })
        sysUserService.findAll().then(res => {
          this.sysUser = res.data
        })
      },
      getData(num, query = '') {
        if (this.plantabs == 'distributing') {
          let str = 'taskState=in=' + (this.$profile.olevel ? this.$profile.olevel : '1') + ';'
          if (query) str += query + ';'
          if (this.$profile.organiza.businessOrg == 5) {
            str += 'centerTaskFlag==true'
          } else if (this.$profile.organiza.businessOrg == 4) {
            str += 'enforcementBrigade==' + this.$profile.organiza.id
          } else if (this.$profile.organiza.businessOrg == 3) {
            str += 'managementUnit==' + this.$profile.organiza.id + ';organiza.id==' + this.$profile.organiza.id + ';taskState==1'
          } else if (this.$profile.organiza.businessOrg == 2 || this.$profile.organiza.businessOrg == 1) {
            str += 'organiza.id==' + this.$profile.organiza.id + ';taskState==1'
          }
          taskService.ps(num, str).then(res => {
            this.tableData = res.data
            this.pageNumber = res.dataCount
          })
        } else if (this.plantabs == 'distributed') {
          let str = 'taskState=in=3,4,5,6,7,8,9,10'
          if (this.$profile.olevel == 0) {
            str += ',2;'
          } else if (this.$profile.olevel == 1) {
            str += ',2;'
          }else{
            str += ';'
          }
          if (query) str += query + ';'
          if (this.$profile.organiza.businessOrg == 5) {
            str += 'centerTaskFlag==true;taskState=ne=0'
          }else if (this.$profile.organiza.businessOrg == 4) {
            str += 'enforcementBrigadeAl==' + this.$profile.organiza.id
          }else if (this.$profile.organiza.businessOrg == 3) {
            str += 'managementUnitAl==' + this.$profile.organiza.id + ';taskState=ne=1'
          }else if (this.$profile.organiza.businessOrg == 2 || this.$profile.organiza.businessOrg == 1) {
            str += 'businessUnit==' + this.$profile.organiza.id + ';taskState=ne=1'
          }
          taskService.ps(num, str).then(res => {
            this.tableData1 = res.data
            this.pageNumber1 = res.dataCount
          })
        }
      },
      getCopy() {
        this.$axios.get(this.$config['copyTask'], {
          params: {
            skey: localStorage.getItem('auth')
          }
        }).then((res) => {
          var data = res.data.content
          if (data.userGroup) {
            var cusperson = []
            for (var x of data.userGroup) {
              var children = []
              if (x.person) {
                for (var child of x.person) {
                  children.push({
                    label: child.fullname,
                    id: '1-' + child.d_id
                  })
                  cusperson.push({
                    label: child.fullname,
                    id: '1-' + child.d_id
                  })

                }
              }
              this.customize.push({
                id: '0-' + x.d_id,
                label: x.group_name,
                children: children
              })
              this.customizelength = parseInt(this.customize.length + cusperson.length)

            }
          }
        })
      },
      dpChanges(val) {
        this.$set(this.form, 'enforcementBrigade', '')
        this.deptOption = []
        for (var i of this.organization) {
          if (i.id == val) {
            if (i.sub) {
              this.qwer = true
              this.deptOption = i.sub
            } else {
              this.qwer = false
            }
          }
        }
      },
      handleClick(tab, event) {
        this.search(0)
      },
      handleSizeChange(val) {
        this.search(val - 1)
        this.currentPage1 = val
        this.currentPage = val
      },
      handleCurrentChange(val) {
        this.search(val - 1)
        this.currentPage1 = val
        this.currentPage = val
      },
      handleCurrentChange1(val) {
        this.currentPage3 = val
        this.getTmpData(val - 1)
      },
      create() {
        this.onekeydialog = true
        this.$router.push('/everyday-task/create')
      },
      show() {
        if (this.multipleSelection.length == 0) {
          this.$alert('没有任务可派发')
        } else {
          this.$router.push({name: 'SendTask', params: {data: this.multipleSelection}})
          // if (this.multipleSelection.length != 0) {
          //   var choose = this.multipleSelection.join(',')
          //   this.$router.push({path: '/everyday-task/send', query: {all: this.pageNumber, choose: choose}})
          // } else {
          //   this.$router.push({path: '/everyday-task/send', query: {all: this.pageNumber}})
          // }

        }
      },
      close() {
        this.multipleSelection = []
        this.onekeydialog = false
        this.$router.go(-1)
        this.search(0)
      },
      close1() {
        this.onekeydialog = false
        this.$router.go(-1)
        // this.$router.push('/everyday-task')
      },
      // 领取任务按钮
      recieveTask() {
        let data = this.taskType
        this.onekeydialog = true
        this.$router.push({name: 'TaskObtain', params: {data: data}})
      },
      // getData (val) {
      //   if (this.plantabs == 'distributing') {
      //     this.getDistributingTasks(val)
      //   } else if (this.plantabs == 'distributed') {
      //     this.getDistributedTasks(val)
      //
      //   }
      // },
      getDistributingTasks(val) {
        this.$axios.get(this.$config['distributingTasks'], {
          params: {
            skey: localStorage.getItem('auth'),
            page: val,
            name: this.planform.search,
            counts: 10,
          }
        }).then((res) => {
          this.pageNumber = res.data.content.shipSize
          this.tableData = res.data.content.ships

        })
      },
      getDistributedTasks(val) {
        this.$axios.get(this.$config['distributedTasks'], {
          params: {
            skey: localStorage.getItem('auth'),
            page: val,
            name: this.planform.search,
            counts: 10,
          }
        }).then((res) => {
          ;
          this.pageNumber1 = res.data.content.shipSize
          this.tableData1 = res.data.content.ships
          for (var i of res.data.content.ships) {
            if (i.taskSource == 1) {
              i.taskSource = '派发任务'
            } else if (i.taskSource == 2) {
              i.taskSource = '临时任务'
            } else if (i.taskSource == 3) {
              i.taskSource = '领取任务'
            }
          }
        })
      },
      tmpClose() {
        this.fileList = []
        this.tmpSituation = false
      },
      submit() {
        if (!this.form.distribute) {
          this.$alert('请选择上报单位')
          return false
        }
        if (!this.form.grade) {
          this.$alert('请选择任等级')
          return false
        }
        if (!this.form.summary.trim()) {
          this.$alert('请填写任务概要')
          return false
        }
        let org = {
          id: '',
          businessOrg: ''
        }
        if (this.form.enforcementBrigade) {
          org.id = this.form.enforcementBrigade
          this.organizaAll.forEach(ele => {
            if (this.form.enforcementBrigade == ele.id) {
              org.businessOrg = ele.businessOrg
            }
          })
        } else if (this.form.distribute) {
          org.id = this.form.distribute
          this.organizaAll.forEach(ele => {
            if (this.form.distribute == ele.id) {
              org.businessOrg = ele.businessOrg
            }
          })
        }
        let obj = {
          organiza: org,
          grade: this.form.grade,
          location: this.form.location,
          summary: this.form.summary,
          otherCases: this.form.otherCases,
          remark: this.form.remark,
          taskSource: 4,
          urlFile: this.form.url.length ? this.form.url.join(',') : '',
        }


        if (this.tmpTitle == 'edit') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          taskService.update(obj, 2).then(res => {

            if (res) {
              this.tmpSituation = false
              this.getTmpData(0)
              this.$message({
                type: 'success',
                message: '修改成功'
              })
            }
          })
        } else {
          taskService.create(obj).then(res => {

            if (res) {
              this.tmpSituation = false
              this.getTmpData(0)
              this.$message({
                type: 'success',
                message: '创建成功'
              })
            }
          })
        }

      },
      // 名称查询
      search(num = 0) {
        this.$set(this, 'currentPage', 1)
        this.$set(this, 'currentPage1', 1)
        let str = this.handlerQuery()
        this.getData(num, str)
      },
      // 处理查询条件
      handlerQuery() {
        if (this.planform.search.trim()) {
          return 'name=like=' + this.planform.search
        } else {
          return ''
        }
      },
      // 查看操作
      look(val) {
        this.onekeydialog = true
        this.$router.push({name: 'CreateEverydayTask', query: {id: val, type: 'view'}})
      },
      // 修改操作
      edit(val, type) {
        this.onekeydialog = true
        if (type == 'edit') {
          this.$router.push({name: 'CreateEverydayTask', params: {data: val, type: 'edit'}})
        } else if (type == 'view') {
          this.$router.push({name: 'CreateEverydayTask', params: {data: val, type: 'view'}})
        }
      },
      // 删除操作
      delet(val) {

        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            taskService.delete(val.id).then(res => {

              this.search(0)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      // 撤销操作
      undo(val) {
        this.$confirm('此操作将撤销该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            taskService.update({id: val.id}, 4).then(res => {

              if (res) {
                this.search(0)
                this.$message({
                  type: 'success',
                  message: '撤销成功'
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      // 中止任务操作
      cancel(val) {

      },
      update() {
        this.onekeydialog = false
        this.search(0)

      },
      tmpbtn() {
        this.tmpdialog = true
        this.getTmpData(0)
      },
      getTempTaskList() {
        this.$axios.get(this.$config['tempTaskList'], {
          params: {
            skey: localStorage.getItem('auth'),
            page: this.currentPage3,
            counts: '10'
          }
        }).then((res) => {
          for (var i of res.data.content.ships) {
            if (i.grade == 1) {
              i.grade = '一般'
            } else if (i.grade == 2) {
              i.grade = '紧急'
            }
            var date = new Date(i.createdate)
            i.uptime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + i.createtime
          }
          this.tableData2 = res.data.content.ships
          this.totalPage = res.data.content.shipSize
        })
      },
      /*临时情况上报 */
      manipulate(param) {
        if (param.action == 'edit') {
          this.tmpSituation = true
          this.tmp = false
          this.tmpTitle = 'edit'
          this.showTmpDetail(param.data)
          this.tmpData = param.data
        } else if (param.action == 'revoke') {
          this.$confirm('此操作将撤销该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              taskService.update({id: param.data.id}, 4).then(res => {

                if (res) {
                  this.tmpSituation = false
                  this.getTmpData(0)
                  this.$message({
                    type: 'success',
                    message: '撤销成功'
                  })
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        } else if (param.action == 'view') {
          this.tmpSituation = true
          this.tmp = true
          this.tmpTitle = 'view'
          this.showTmpDetail(param.data)
          this.tmpData = param.data
        }
      },
      tmpbtnShow() {
        this.tmpSituation = true
        this.tmp = false
        this.form = {}
        this.form.url = []
      },
      // 加载临时情况列表
      getTmpData(num) {
        let query = 'taskSource=in=4'
        taskService.ps(num, query).then(res => {

          this.tableData2 = res.data
          this.totalPage = res.dataCount
        })
      },
      beforeupload(file) {
        var tpye = file.name.slice(file.name.lastIndexOf('.') + 1)
        if (tpye == 'jpeg' || tpye == 'jpg' || tpye == 'png') {
          this.uploadobj.mimeType = 'image/jpeg'

        } else if (tpye == 'doc' || tpye == 'docx') {
          this.uploadobj.mimeType = 'application/msword'
        } else if (tpye == 'pdf') {
          this.uploadobj.mimeType = 'application/pdf'
        } else if (tpye == 'txt') {
          this.uploadobj.mimeType = 'text/plain'
        }
        this.uploadobj.filename = file.name
        return true
      },
      handleExceed(files, fileList) {

      },
      uploadSuccess(res) {

        this.form.url.push(res.data.link)
      },
      uploadRemove: function (res) {

      },
      //任务派发详情回显派发单位
      getSend1() {
        this.$axios.get('TaskSelectTaskOrgAndUser', {
          params: {
            skey: localStorage.getItem('auth'),
            d_id: this.sendingID,

          }
        }).then((res) => {

          if (this.orgid == 44) {

            var i = '0-' + res.data.content.distribute
            var a = '1-' + res.data.content.enforcementBrigade + '-' + res.data.content.distribute
            for (var p of res.data.content.person) {
              this.persontree = '2-' + p.userId + '-' + res.data.content.enforcementBrigade
            }
            var arr = [i, a, this.persontree]
            this.treeList = []
            var data = []
            var treelist = []
            for (var n of arr) {
              for (var j of this.data2) {
                if (j.id == n) {
                  treelist.push(j.label)
                  break
                }
                for (var x of j.children) {
                  if (x.id == n) {
                    treelist.push(x.label)
                    break
                  }

                  //
                  if (x.children) {
                    for (var y of x.children) {
                      if (y.id == n) {
                        treelist.push(y.label)
                        break
                      }

                    }
                  }
                }
              }

            }
            for (var t of treelist) {
              this.treeList.push({
                name: t,
                id: n
              })
            }
            this.$refs.tree.setCheckedKeys(arr)
          }
        })
      },

      //获取抄送数据
      getSend123() {
        this.$axios.get(this.$config['copyTask'], {
          params: {
            skey: localStorage.getItem('auth')
          }
        }).then((res) => {
          var data = res.data.content
          if (data.leader) {
            for (var key of data.leader) {
              var children = []
              if (key.person) {
                for (var child of key.person) {
                  children.push({
                    label: child.fullname,
                    id: '1-' + child.d_id
                  })
                }
              }

              this.leaderlist.push({
                id: '0-' + key.d_id,
                label: key.name,
                children: children
              })

            }
          }
          if (data.business) {
            for (var i of data.business) {
              var children = []
              if (i.person) {
                for (var child of i.person) {
                  children.push({
                    label: child.fullname,
                    id: '1-' + child.d_id
                  })
                }
              }

              this.dows.push({
                id: '0-' + i.d_id,
                label: i.name,
                children: children
              })

            }
          }
          if (data.poliList) {
            for (var j of data.poliList) {
              var children = []
              if (j.person) {
                for (var child of j.person) {
                  children.push({
                    label: child.fullname,
                    id: '1-' + child.d_id
                  })
                }
              }
              this.laws.push({
                id: '0-' + j.d_id,
                label: j.name,
                children: children
              })
            }
          }
          if (data.sea) {
            for (var x of data.sea) {
              var children = []
              if (x.person) {
                for (var child of x.person) {
                  children.push({
                    label: child.fullname,
                    id: '1-' + child.d_id
                  })
                }
              }
              this.egs.push({
                id: '0-' + x.d_id,
                label: x.name,
                children: children
              })
            }

          }
          if (data.son) {
            for (var x of data.son) {
              var children = []
              if (x.person) {
                for (var child of x.person) {
                  children.push({
                    label: child.fullname,
                    id: '1-' + child.d_id
                  })
                }
              }
              this.dutys.push({
                id: '0-' + x.d_id,
                label: x.name,
                children: children
              })
            }
          }

        })
      },
      makeCopy() {
        this.copylistP = []

        this.copylist = this.checkedLeader.concat(this.checkedDow, this.checkedLaw, this.checkedDuty, this.checkedEg)
        var arr = this.leaderlist.concat(this.dows, this.laws, this.dutys, this.egs)
        for (var i of this.copylist) {
          for (var j of arr) {
            if (j.id == i.id) {
              this.copylistP.push(j.label)
              break
            } else if (j.children) {
              for (var k of j.children) {
                if (k.id == i.id) {
                  this.copylistP.push(k.label)
                  break
                }
              }
            }
          }
        }

      },
      //全选
      leaderAll(val) {

        if (val) {
          this.$refs.treeLeader.setCheckedNodes(this.leaderlist)
          this.checkedLeader = this.$refs.treeLeader.getCheckedNodes()
        } else {
          this.$refs.treeLeader.setCheckedNodes([])
          this.checkedLeader = []
        }
        // var arr = []
        // for (var i of this.leaderlist) {
        //     arr.push(i.id)
        // }
        // this.checkedLeader = val ? arr : [];

        this.makeCopy()
      },
      leaderAllChange(value) {
        let checkedLeader = value.length
        this.checkLeader = checkedLeader === this.leaderlist.length
        this.makeCopy()
      },
      dowAll(val) {
        if (val) {
          this.$refs.treeDows.setCheckedNodes(this.dows)
          this.checkedDow = this.$refs.treeDows.getCheckedNodes()
        } else {
          this.$refs.treeDows.setCheckedNodes([])
          this.checkedDow = []
        }
        // var arr = []
        // for (var i of this.dows) {
        //     arr.push(i.id)
        // }
        // this.checkedDow = val ? arr : [];
        this.makeCopy()
      },
      dowAllChange(value) {
        let checkedDow = value.length
        this.checkDow = checkedDow === this.dows.length
        this.makeCopy()
      },
      lawAll(val) {
        // var arr = []
        // for (var i of this.laws) {
        //     arr.push(i.id)
        // }
        // this.checkedLaw = val ? arr : [];
        // this.makeCopy()
        if (val) {
          this.$refs.treelaws.setCheckedNodes(this.laws)
          this.checkedLaw = this.$refs.treelaws.getCheckedNodes()
        } else {
          this.$refs.treelaws.setCheckedNodes([])
          this.checkedLaw = []
        }
        this.makeCopy()
      },
      lawAllChange(value) {
        let checkedLaw = value.length
        this.checkLaw = checkedLaw === this.laws.length
        this.makeCopy()
      },
      dutyAll(val) {
        // var arr = []
        // for (var i of this.dutys) {
        //     arr.push(i.id)
        // }
        // this.checkedDuty = val ? arr : [];
        // this.makeCopy()

        if (val) {
          this.$refs.treeDutys.setCheckedNodes(this.dutys)
          this.checkedDuty = this.$refs.treeDutys.getCheckedNodes()
        } else {
          this.$refs.treeDutys.setCheckedNodes([])
          this.checkedDuty = []
        }
        this.makeCopy()
      },
      dutyAllChange(value) {
        let checkedDuty = value.length
        this.checkDuty = checkedDuty === this.dutys.length
        this.makeCopy()
      },
      egAll(val) {
        // var arr = []
        // for (var i of this.egs) {
        //     arr.push(i.id)
        // }
        // this.checkedEg = val ? arr : [];
        // this.makeCopy()
        if (val) {
          this.$refs.treeEgs.setCheckedNodes(this.egs)
          this.checkedEg = this.$refs.treeEgs.getCheckedNodes()
        } else {
          this.$refs.treeEgs.setCheckedNodes([])
          this.checkedEg = []
        }
        this.makeCopy()
      },
      egAllChange(value) {
        let checkedEg = value.length
        this.checkEg = checkedEg === this.egs.length
        this.makeCopy()
      },
      customizeAll(val) {

        if (val) {
          this.$refs.treeCustomize.setCheckedNodes(this.customize)
          this.checkedCustomize = this.$refs.treeCustomize.getCheckedNodes()
        } else {
          this.$refs.treeCustomize.setCheckedNodes([])
          this.checkedCustomize = []

        }
        this.copylistP = []

        this.cusChil = []
        for (var i of this.checkedCustomize) {
          if (!i.children) {
            this.cusChil.push(i)
          }
        }

        for (var i of this.cusChil) {
          for (var j of this.checkedCustomize) {
            if (j.id == i.id) {
              this.copylistP.push(j.label)
              this.copylistP = Array.from(new Set(this.copylistP))
              break
            } else if (j.children) {
              for (var k of j.children) {
                if (j.id == i.id) {
                  this.copylistP.push(j.label)
                  this.copylistP = Array.from(new Set(this.copylistP))
                  break
                }
              }
            }
          }
        }
        // this.makeCopy()
      },
      customizeAllChange(value) {
        let checkedCustomize = value.length
        this.checkCustomize = checkedCustomize === this.customize.length
        // this.makeCopy()
      },
      //

      // getCheckedKeys() {
      //   },

      getTree() {
        this.data2 = []
        this.$axios.get(this.$config['oneKeyMan'], {params: {skey: localStorage.getItem('auth')}}).then((res) => {
          var level = localStorage.getItem('ulevel')
          var business = localStorage.getItem('businessOrg')
          if (business == 1) {
            level = 2
          }
          for (var i of res.data.content) {
            if (i.business_org) {
              if (i.business_org == 1) {
                level = 1
              } else {
                level = localStorage.getItem('ulevel')
              }
            }
            if (i.zfUser) {
              i.child = []
              for (var j of i.zfUser) {
                if (j.zfUser) {
                  j.child = []
                  for (var k of j.zfUser) {
                    j.child.push({
                      label: k.name || k.fullname,
                      id: Number(level) + 2 + '-' + k.d_id + '-' + k.org_id,
                    })
                  }
                }
                var pid = j.org_id || j.pid
                var name = j.name || j.fullname
                i.child.push({
                  label: name,
                  id: Number(level) + 1 + '-' + j.d_id + '-' + pid,
                  children: j.child
                })
              }
            }
            if (i.business_org && i.business_org == 1) {
              level = 0
            }
            this.data2.push({
              label: i.name || i.fullname,
              id: level + '-' + i.d_id,
              children: i.child
            })
          }

        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        if (val.length != 0) {
          for (var i of val) {
            this.multipleSelection.push(i.id)
          }
        }
      },
      leaderChange(val, node) {
        this.checkedLeader = node.checkedNodes
        this.makeCopy()

      },
      dowsChange(val, node) {
        this.checkedDow = node.checkedNodes
        this.makeCopy()
      },
      lawsChange(val, node) {
        this.checkedLaw = node.checkedNodes
        this.makeCopy()
      },
      egsChange(val, node) {
        this.checkedEg = node.checkedNodes
        this.makeCopy()
      },
      dutyChange(val, node) {
        this.checkedDuty = node.checkedNodes
        this.makeCopy()
      },
      customizeChange(val, node) {
        // this.checkedCustomize = node.checkedNodes
        this.copylistP = []
        this.checkedCustomize = node.checkedNodes

        this.cusChil = []
        for (var i of this.checkedCustomize) {
          if (!i.children) {
            this.cusChil.push(i)
          }
        }

        for (var i of this.cusChil) {
          for (var j of this.checkedCustomize) {
            if (j.id == i.id) {
              this.copylistP.push(j.label)
              this.copylistP = Array.from(new Set(this.copylistP))
              break
            } else if (j.children) {
              for (var k of j.children) {
                if (j.id == i.id) {
                  this.copylistP.push(j.label)
                  this.copylistP = Array.from(new Set(this.copylistP))
                  break
                }
              }
            }
          }
        }
      },
      //自定义抄送
      cusClick() {
        this.dialogVisible = true
      },
      //自定义群组
      groupData1() {
        var arr = []
        this.$axios.get('OrganizationSelectAllUserByOrg', {
          params: {
            'skey': localStorage.getItem('auth')
          }

        }).then((res) => {
          arr.push({
            d_id: 1,
            name: '全部',
            users: res.data.content.userAll
          })
        }).then(() => {
          this.$axios.get('OrganizationSelectAllUserByOrg', {
            params: {
              'skey': localStorage.getItem('auth')
            }

          }).then((res) => {
            this.groupData = arr.concat(res.data.content.userOrg)
          })
        })
      },
      clearCopy() {
        this.ruleForm.name = ''
        this.ruleForm.idStr = []
        this.$refs.treeCustomize.setCheckedKeys([])

      },

    }
  }
</script>

<style lang="scss">
  .refine_hscdaytask {
  }

  .plan-operate {
    .create {
      margin-bottom: 22px;
    }
  }

  .task-content {
    .blue-button {
      width: 126px;
      margin-left: 20px;
    }

    .unit-wrap {
      margin-bottom: 10px;

      .w33 {
        width: 22.3%;
        float: left;
        margin: 0 1%;
      }

      .w33:first-child {
        margin-left: 0;
      }

      i {
        float: left;
        line-height: 40px;
        font-size: 20px;
        cursor: pointer;
      }
    }

    .el-upload__tip {
      width: 300px;
      height: 40px;
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      margin-top: 0;
      padding: 0 15px;
      font-size: 14px;
      color: #b9b9b9;
      text-align: left;
    }

    .el-upload--text {
      float: right;
      width: 58px;
      height: 40px;
      border: none;
      border-radius: 2px;
      margin-left: 5px;
    }

    .el-upload--text button {
      background-color: #0062cd;
      border-radius: 2px;
      border: none;
      padding: 0;
      width: 58px;
      height: 40px;
      text-align: center;
      margin-left: 0px !important;
    }

    .button-action {
      padding-bottom: 30px;
    }

    .el-form img {
      width: 62px;
      height: 64px;
      background-color: #f5f5f5;
      border-radius: 2px;
      border: solid 1px #dddddd;
      float: left;
      margin-right: 10px;
    }

    .checkgroup {
      .el-checkbox {
        padding: 0;
        float: left;
        margin-left: 0px;
      }

      .el-checkbox__input {
        display: inline-block;
      }

      .el-checkbox__label {
        display: inline-block;
        max-width: 90%;
        vertical-align: -4px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 5px;
      }

      .el-form-item__content {
        width: 90%;
        box-sizing: border-box;
      }


    }

    .groupli {
      border: 1px solid #ddd;
      height: 400px;
      // margin-right:10px;
      padding: 0px 4px;

      P {
        font-size: 14px;
        line-height: 30px;
      }

      li {
        line-height: 30px;
        border-bottom: 1px solid #ddd;
      }

      .el-tree-node__content > .el-tree-node__expand-icon {
        padding: 0px;
      }

      .el-tree-node {
        width: 100%;
        float: left;
        display: inline-table;
      }

    }

    .el-col-4:first-child {
      padding-left: 0px !important
    }

    .copylist {
      overflow-y: auto
    }

    .task-tree {
      border: 1px solid #ddd;
      padding: 10px 0px;
      height: 300px;
      overflow-y: auto;

      label {
        width: auto !important;

      }

      .el-checkbox {
        width: auto !important;
        height: auto;
      }
    }

    .tree-cont {
      border: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
      min-height: 300px;
      overflow-y: auto;

      .el-input {
        width: 60px;
        height: 30px;
        margin-left: 5px;

        input {
          height: 30px;
          text-align: center;
        }
      }
    }

    .file-div{
      color: #0062cd;
      cursor: pointer;
    }

    .copybtn {
      width: 50px;
      height: 20px;
      background-color: #0062cd;
      border-radius: 4px;
      font-size: 12px;
      color: #ffffff;
      text-align: center;
      line-height: 20px;
      cursor: pointer;
      margin-top: 10px;
      margin-right: 2px;
    }

    .el-tree__empty-block {
      margin-top: 30px;
    }

  }
</style>
